<template>
    <div class="user-auth">
        <el-form :model="form" ref="form" label-width="220px" label-position="right" :rules="rules">
            <v-form-title title="上传证件"/>
            <el-form-item prop="certType" label="证件类型">
                <el-radio-group v-model="form.certType" @change="rules.images[0].len=form.certType+1">
                    <el-radio :label="0">多证合一营业执照（统一社会信用代码）</el-radio>
                    <el-radio :label="1">多证合一营业执照（存在独立的组织机构代码证号）</el-radio>
                    <el-radio :label="2">普通营业执照</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="socialCreditCode" label="社会统一代码证">
                <el-input v-model="form.socialCreditCode" placeholder="请输入社会统一代码证号码" class="line-input"></el-input>
            </el-form-item>
            <el-form-item prop="businessLicenseNumber" label="营业执照注册号" v-if="form.certType !== 0">
                <el-input v-model="form.businessLicenseNumber" placeholder="请输入营业执照注册号码" class="line-input"></el-input>
            </el-form-item>
            <el-form-item prop="organizationCode" label="组织机构代码证" v-if="form.certType !== 0">
                <el-input v-model="form.organizationCode" placeholder="请输入组织机构代码证号码" class="line-input"></el-input>
            </el-form-item>
            <el-form-item prop="images">
                <v-unit-auth-images :images="images" v-model="form.images" @ocr="licenseOcr"/>
            </el-form-item>
            <v-form-title title="企业信息"/>
            <el-form-item prop="channelName" label="企业名称">
                <el-input class="line-input" v-model="form.channelName" placeholder="请输入企业名称"></el-input>
            </el-form-item>
            <el-form-item prop="addressArray" label="通讯地址">
                <v-address ref="address" v-model="form.addressArray"></v-address>
            </el-form-item>
            <el-form-item prop="address" label="详细地址">
                <el-input class="line-input" v-model="form.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>

            <el-form-item prop="industryType" label="行业类型">
                <el-select v-model="form.industryType" placeholder="请选择行业类型">
                    <el-option
                            v-for="item in $dict.industryTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="enterpriseType" label="企业类型">
                <el-select v-model="form.enterpriseType" placeholder="请选择企业类型">
                    <el-option
                            v-for="item in $dict.enterpriseTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="operation">
            <el-button type="primary" @click="valid">提交</el-button>
        </div>
    </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
  import vAddress from '@/components/address'
  import vUnitAuthImages from '@/components/unit-auth-images'
  import vFormTitle from '@/components/form-title'
  import { Action } from 'vuex-class'

  @Component({
    components: {
      vAddress,
      vUnitAuthImages,
      vFormTitle
    }
  })
  export default class UnitAuth extends Vue {
    @Action getPolicy

    form = {
      certType: 0,
      socialCreditCode: '',
      businessLicenseNumber: '',
      organizationCode: '',
      images: [],
      //
      channelName: '',
      addressArray: [],
      address: '',
      industryType: '',
      enterpriseType: ''
    }
    tempForm = {}
    rules = {
      certType: [{required: true, message: '请选择营业执照类型', trigger: 'change'}],
      industryType: [{required: true, message: '请选择行业类型', trigger: 'change'}],
      enterpriseType: [{required: true, message: '请选择企业类型', trigger: 'change'}],
      socialCreditCode: [{required: true, message: '请输入社会统一代码证号码', trigger: 'change'}],
      address: [{required: true, message: '请输入详细地址', trigger: 'change'}],
      businessLicenseNumber: [{required: true, message: '请输入营业执照注册号码', trigger: 'change'}],
      organizationCode: [{required: true, message: '请输入组织机构代码证号码', trigger: 'change'}],
      images: [{type: 'array', required: true, message: '请上传相应的图片', trigger: 'change', len: 1}],
      //
      channelName: [{required: true, message: '请输入企业名称', trigger: 'blur'}],
      addressArray: [{type: 'array', required: true, message: '请选择企业通讯地址', trigger: 'change', len: 3}]

    }
    imagesMap = [
      {
        key: 'businessLicensePhoto',
        src: '',
        name: '营业执照',
        placeholder: 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/fddde45b-2132-4e75-84ef-dcc983fe128b.png',
        certType: 0
      },
      {
        key: 'organizationCodePhoto',
        src: '',
        name: '组织机构代码证',
        placeholder: 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/2020d070-b61b-429f-99c2-3276572f2744.png',
        certType: 1
      },
      {
        key: 'taxRegistrationPhoto',
        src: '',
        name: '税务机构登记证',
        placeholder: 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/0fcef1e4-94e5-472e-b54e-6bf8d6f23592.png',
        certType: 2
      }
    ]
    @Prop() userInfo

    get images () {
      return this.imagesMap.filter(image => this.form.certType >= image.certType)
    }

    valid () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        let f = {...this.form}
        f.areaProvince = f.addressArray[0]
        f.areaCity = f.addressArray[1]
        f.areaDistrict = f.addressArray[2]
        f.channelProviderId = window.sessionStorage.getItem('enterpriseUserId')
        f.images.forEach(v => {
          f[v.key] = v.src
        })
        delete  f.images
        delete  f.addressArray
        for (let key in f) {
          if (f.hasOwnProperty(key)) {
            if (f[key] === null || f[key] === '') {
              delete f[key]
            }
          }
        }
        this.post(f)
      })
    }

    async post (form) {
      let res: AjaxResponse = await this.$axios.put('g/gateway/channelprovider/perfectinformation', form)
      this.$utils.tips(res)
      if(res.responseCode === 200){
        this.$router.push('/register/process-2')
      }
    }
    async licenseOcr (imageUrl) {
      let res: AjaxResponse = await this.$axios.post('g/gateway/ocr/business/license', {
        imageUrl
      })
      if (res.responseCode === 200) {
        this.form.address = res.data.address
        this.form.socialCreditCode = res.data.reg_num
        this.form.businessLicenseNumber = res.data.reg_num
        this.form.channelName = res.data.name

      }
    }
    mounted () {
      this.getPolicy()
    }
  }
</script>
<style lang="less" scoped>
    .user-auth {
        width: 1180px;
        margin: 0 auto;
        padding: 60px 0 30px;
    }

    .operation {
        text-align: center;
        font-size: 14px;
        color: #999;
        .el-button {
            margin: 30px 0;
        }
    }
    .el-select {
        width: 300px;
    }
    .el-steps {
        margin-bottom: 60px;
    }
</style>
